<template>
  <div class="order">
    <header>
      <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <main>
      <van-contact-card type="edit" :tel="defAddress.tel" :name="defAddress.name" @click="onEdit" />
      <div class="shop" v-for="item in shopList" :key="item.id">
          <!-- 商品卡片 -->
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :price="item.s_good.price"
              :desc="item.s_good.desc"
              :title="item.s_good.name"
              :thumb="item.s_good.s_goods_photos[0].path"
            >
              <template #tags>
                <van-tag plain type="warning">假一赔四</van-tag>
                <van-tag plain type="warning">极速退款</van-tag>
                <van-tag plain type="warning">七天无理由退换</van-tag>
              </template>
            </van-card>
            <van-cell title="配送服务" is-link value="快递 免邮 送运费险" />
            <van-cell title="开具发票" is-link value="本次不开具发票" />
            <van-cell title="订单备注" is-link value="无备注" />
        </van-swipe-cell>
      </div>
      <van-cell-group inset>
        <van-cell title="支付方式" is-link value="微信支付"  />
      </van-cell-group>
    </main>
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit">
      <span>共{{totalNum}}件</span>
    </van-submit-bar>
  </div>
  <!-- 支付页面 -->
  <van-action-sheet v-model:show="show" title=" " >
    <div class="content">
      <div class="title">
        订单需支付金额
      </div>
      <div class="moeny"><span>￥</span>{{totalPrice }}</div>
      <van-cell-group>
        <van-cell title="账号" :value="user.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="付款方式" value="微信支付" />
      </van-cell-group>
      <van-button type="primary" @click="payBtn" block>确认付款</van-button>
    </div>
  </van-action-sheet>
  <!-- 取消支付提示 -->
  <van-dialog v-model:show="showDia" title="您已提交订单,请尽快支付！" show-cancel-button>
  </van-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter ,useRoute } from 'vue-router';
import {addOrderApi,payOrderApi,updateOrderApi} from '@/server'
const route=useRoute()
const router=useRouter()
// 账户名
const user=ref()
const userInfo=ref([])
userInfo.value=JSON.parse(localStorage.getItem('userInfo'))
user.value=userInfo.value.phone
// 商品列表
const shopList=ref([])
shopList.value=JSON.parse(route.query.data)
// 返回
const onClickLeft = () => history.back();
// 电话地址
const defAddress=ref({
  id:'',
  tel:'',
  name:''
})
const address=JSON.parse(localStorage.getItem('defAddress'))
defAddress.value.name=address.name
defAddress.value.tel=address.tel||address.phone
defAddress.value.id=address.id
// 总数
const totalNum=ref(0)
// 总价
const totalPrice=ref(0)
shopList.value.forEach(ele=>{
  totalNum.value+=ele.num
  totalPrice.value+=ele.s_good.price*ele.num
})
// 编辑地址
const onEdit = () =>{
  router.push('/AddressList')
}
// 是否展示支付
const show=ref(false)
// 商品组信息
const shopGroup=ref([])
// 购物车组信息
const cartGroup=ref([])
shopList.value.forEach(ele=>{
  let data={}
  data.id=ele.goods_id
  data.num=ele.num
  shopGroup.value.push(data)
  cartGroup.value.push(ele.id)
})
// 订单id
const orderId=ref()
// 提交订单
const onSubmit =async () =>{
  show.value=true
  let res=await addOrderApi({goods_info:shopGroup.value,addr_id:defAddress.value.id,shoppingCartIds:cartGroup.value})
  orderId.value=res.data.result.id
}
// 取消支付提示
const showDia=ref(false)
// 支付
const payBtn=async ()=>{
  let res=await payOrderApi({id:orderId.value})
  if(res.status===200){
    show.value=false
    // 更新
    await updateOrderApi(res.data.data.id,{status:'2',addr_id:res.data.data.addr_id})
    showDia.value=false
  }
}
// 取消支付
// const closeBtn=()=>{
//   showDia.value=true
// }
</script>

<style lang='scss'>
.order{
  width: 100vw;
  height: 266.6667vw;
  background-color: gainsboro;
  header{
    .van-nav-bar .van-icon{
      color: black;
      font-size: 4.2667vw;
    }
  }
  main{
    padding-bottom: 17vw;
    background-color: gainsboro;
    .shop{
      padding-top: 5.3333vw;
      margin: 2.6667vw auto;
      width: 96vw;
      height: 70.3333vw;
      border-radius: 2.6667vw;
      box-sizing: border-box;
      background-color: white;
      .van-checkbox{
        margin-left: 2.6667vw;
      }
      .delete-button {
        height: 100%;
      }
    }
    .van-cell-group{
      margin: 0 auto;
      width: 96vw;
    }
  }
}
.content {
  padding: 8vw 4.2667vw 0;
  height: 80vh;
  .title {
    text-align: center;
    height: 5.3333vw;
    line-height: 5.3333vw;
    margin-bottom: 2.6667vw;
  }
  .moeny {
    height: 10.6667vw;
    text-align: center;
    line-height: 10.6667vw;
    font-size: 10vw;
    margin-bottom: 2.6667vw;
    span {
      font-size: 5vw;
      font-weight: bold;
    }
  }
  .van-button {
    border-radius: 2.6667vw;
  }
}

</style>
